<template>
  <view class="container" :style="appThemeStyle">
    <view class="result-wrap">
      <view class="iconfont" :class="{ active: options.isFail }">{{ !options.isFail ? '&#xe6c1;' : '&#xe69d;' }}</view>
      <view class="result-text">{{ !options.isFail ? '收款成功' : '收款失败' }}</view>
      <view class="money" v-if="!options.isFail">
        <text class="icon">¥</text>
        <text class="number price-icon">{{ options.payAmount }}</text>
      </view>
    </view>
    <view class="cell-group" v-if="!options.isFail">
      <view class="cell-item">
        <view class="label">付款方式</view>
        <view class="value">
          <text class="iconfont m-r-10">&#xe6ca;</text>
          <text>{{ PayChannelTypeEnum.data.find(val => val.value === Number(options.payChannelId || 0))?.name || '--' }}</text>
        </view>
      </view>
      <view class="cell-item">
        <view class="label">交易时间</view>
        <view class="value">{{ options.payTime }}</view>
      </view>
      <view class="cell-item">
        <view class="label">交易流水号</view>
        <view class="value">{{ options.transactionId }}</view>
      </view>
    </view>
    <view class="cell-group" v-else>
      <view class="cell-item">
        <view class="label">失败原因</view>
        <view class="value">{{ options.msg }}</view>
      </view>
    </view>
    <view class="footer-fixed">
      <view class="btn-wrapper">
        <u-button type="primary" shape="circle" @click="confirm">确认</u-button>
      </view>
    </view>
  </view>
</template>
<script>

import PayChannelTypeEnum from "@/common/enum/order/payChannelType"

export default {
  name: "index",
  data() {
    return {
      PayChannelTypeEnum,
      options: {}
    }
  },
  onLoad(options) {
    this.options = options
  },
  methods: {
    confirm() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 24rpx;

  .result-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .iconfont {
      color: #00B42A;
      font-size: 60rpx;

      &.active {
        color: #F53F3F;
      }
    }

    .result-text {
      font-size: 32rpx;
      margin: 20rpx auto 32rpx
    }

    .money {
      font-weight: bold;

      .icon {
        font-size: 40rpx;
        margin-right: 8rpx;
      }

      .number {
        font-size: 70rpx;
      }
    }
  }

  .cell-group {
    margin-top: 80rpx;
    padding: 0 8rpx;

    .cell-item {
      line-height: 64rpx;
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      color: #666666;

      .label {
        width: 160rpx;
      }

      .value {
        width: 500rpx;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      .iconfont {
        font-size: 40rpx;
        color: #f8283f;
      }
    }
  }

  // 底部操作栏
  .footer-fixed {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    right: 0;
    z-index: 11;
    // 设置ios刘海屏底部横线安全区域
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .btn-wrapper {
      padding: 16rpx 32rpx;
    }
  }
}
</style>
